<script setup lang="ts"></script>

<template>
  <div class="article">
    <p>
      鯤 ギャルゲーム
      ウェブサイトのデザインにおいて、私たちは以下の優れたウェブサイトのインターフェースデザインを参考にしました：
    </p>
    <br />
    <br />
    <ul class="list">
      <li>
        Twitter（ツイッター） - 半透明デザイン、無限の高さのフレキシブルボックス
      </li>
      <li>Github（ギットハブ） - カラースキーム</li>
      <li>bbs.kfmax.com（緋月） - ユーザー情報の分類</li>
      <li>
        StackOverflow（スタックオーバーフロー） - ページセクションのシャドウ
      </li>
      <li>ChatGPT（OpenAI ChatGPT） - 様々な技術的問題</li>
      <li>Google（グーグル） - トピック詳細ページ</li>
      <li>YouTube（ユーチューブ） - 技術交流ページ</li>
      <li>Adobe（アドビ） - フッターのデザイン</li>
      <li>Codepen の多数の事例 – すべてのページが含まれています</li>
      <li>Bilibili（ビリビリ） - ヘッダーナビゲーションバー</li>
      <li>Ymgal（月幕 Galgame） - ヘッダーナビゲーションバー</li>
    </ul>
    <br />
    <br />
    <p>
      デザインの初期段階で、私たちは優れたデザインのウェブページを大量に閲覧し、数多くのウェブサイトのデザインを参考にしましたが、大量の閲覧時に関連記録を取っていなかったため、具体的な例を示すことができません。
    </p>
    <br />
    <br />
    <p>
      鯤 ギャルゲーム
      ウェブサイトの構築にあたり、以下の方々から大変な支援を受けました：
    </p>
    <br />
    <br />
    <ul class="list">
      <li>
        <span class="skip">
          <a
            href="https://acgngames.net"
            target="_blank"
            rel="noopener noreferrer"
          >
            ACGNGAME
          </a>
        </span>
        （Galworld）管理者。老羽さん！ログインして！
      </li>
      <li>
        <span class="skip">
          <a
            href="https://shinnku.com"
            target="_blank"
            rel="noopener noreferrer"
          >
            Shinnku
          </a>
        </span>
        （失われた小さな場所）管理者。世界一可愛い美少女真紅お姉さん！無敵！
      </li>
      <li>
        <span class="skip">
          <a
            href="https://www.ymgal.games"
            target="_blank"
            rel="noopener noreferrer"
          >
            Ymgal
          </a>
        </span>
        （月幕 Galgame）管理者。管理者！強すぎる！
      </li>
      <li>
        <span class="skip">
          <a
            href="https://yurzhang.com"
            target="_blank"
            rel="noopener noreferrer"
          >
            yurzhang
          </a>
        </span>
        （yur!）夜の、転生！
      </li>
      <li>
        <span class="skip">
          <a href="https://i.plr.moe" target="_blank" rel="noopener noreferrer">
            Haruki
          </a>
        </span>
        （Haruki さん！）非常に非常に賢い人！数学の天才！
      </li>
      <li>
        <span class="skip">
          <a
            href="https://asukaminato.eu.org/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Asuka Minato
          </a>
        </span>
        （湊ママ！）彼は強すぎる！私は泣きます！
      </li>
    </ul>
    <br />
    <br />
    <p>
      また、<span class="skip">
        <a
          href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=l8kixeJ-RCfIgpzM63QT7G8H44KkpC7q&authKey=X2IAU3zT2wOOQBCl4mwkYeTGNktTIs%2F5XhtVdKTUuyvPjRkdXjOhEhBT8l3kkSSX&noverify=0&group_code=871857690"
          target="_blank"
          rel="noopener noreferrer"
        >
          鯤のギャルゲーム交流群（Tencent QQ）
        </a>
      </span>
      ,
      <span class="skip">
        <a
          href="https://t.me/kungalgame"
          target="_blank"
          rel="noopener noreferrer"
        >
          鯤のギャルゲーム交流群（Telegram）
        </a>
      </span>
      ,
      <span class="skip">
        <a
          href="https://t.me/kungalgame"
          target="_blank"
          rel="noopener noreferrer"
        >
          鯤ビジュアルノベルフォーラム開発チーム（Tencent QQ）
        </a>
      </span>
      ,
      <span class="skip">
        <a
          href="https://t.me/kungalgame"
          target="_blank"
          rel="noopener noreferrer"
        >
          鯤ビジュアルノベルフォーラム開発チーム（Telegram）
        </a>
      </span>
      , 及びその他多くの方々からの関連サポートに心より感謝いたします。
    </p>
    <br />
    <br />
    <p>
      私たちのウェブサイトは、萌え（素晴らしい）、オープンソース、無料の<span
        class="skip"
      >
        <NuxtLinkLocale to="/kungalgame">構築原則</NuxtLinkLocale>
      </span>
      を遵守し、不断の改善と更新を行います。私たちのプロジェクトは GitHub
      でご覧いただけます：
    </p>
    <br />
    <br />

    <p>
      現在のフォーラムバージョン (V2):
      <br />
      <br />
      Nuxt3 + MongoDB フルスタック実装
      <span class="skip">
        <a
          href="https://github.com/KUN1007/kun-galgame-nuxt3"
          target="_blank"
          rel="noopener noreferrer"
        >
          kun-galgame-nuxt3
        </a>
      </span>
    </p>

    <br />
    <br />

    <p>
      フロントエンドとバックエンドを分離したフォーラム (V1):
      <br />
      <br />
      フロントエンド Vue3 + Vite + TypeScript + Pinia 実装：
      <span class="skip">
        <a
          href="https://github.com/KUN1007/kun-galgame-vue"
          target="_blank"
          rel="noopener noreferrer"
        >
          kun-galgame-vue
        </a>
      </span>
    </p>
    <p>
      バックエンド Koa2 + Redis + Mongoose + MongoDB 実装：
      <span class="skip">
        <a
          href="https://github.com/KUN1007/kun-galgame-koa"
          target="_blank"
          rel="noopener noreferrer"
        >
          kun-galgame-koa
        </a>
      </span>
    </p>

    <br />
    <br />

    <p>
      フォーラムの初期設計案:
      <br />
      <br />
      純粋な HTML + CSS 実装：
      <span class="skip">
        <a
          href="https://github.com/KUN1007/kungalgame-pure-css"
          target="_blank"
          rel="noopener noreferrer"
        >
          kun-galgame-pure-css
        </a>
      </span>
    </p>
    <br />
    <br />
    <br />
    <br />
    <p>
      ご迷惑でなければ、私たちの GitHub
      プロジェクトにスターをつけて、サポートの意味を込めていただければ幸いです。
    </p>
  </div>
</template>

<style lang="scss" scoped>
.article {
  display: flex;
  flex-direction: column;
}

.skip {
  border-bottom: 1.5px solid var(--kungalgame-blue-5);
  cursor: pointer;

  a {
    color: var(--kungalgame-blue-5);
  }
}

.list {
  padding: 0;
  margin: 0;

  & > li {
    list-style: inside;
    margin: 5px 0;
  }
}

p {
  margin: 5px;
}
</style>
